$(function(){
    //监听.tab-panels .tabs li的点击事件
    $('.tab-panels .tabs li').on('click', function(){
        var $panels = $(this).closest('.tab-panels');
        $(this).addClass('active');
        var li_ref = $(this).attr('ref');
        $panels.find('.tabs li.active').removeClass('active');
        //上滑隐藏, 设定动画时长为300毫秒, 为该元素移除active类名
        $panels.find('.panel.active').slideUp(200, tabshow);

        function tabshow(){
            $(this).removeClass('active');
            //下滑展示, 设定动画时长为300毫秒, 为该元素添加active类名
            $('#'+li_ref).slideDown(180, function(){
                $(this).addClass('active');
            });
        }
    })
})